<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <title>Intro to jQuery Mobile</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" /> 
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
        <style>
            body {
                background-color: rgb(221,221,221);
            }
        </style>

    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="content">
                <div class="content-primary">	
                    <input type="hidden" id="deviceId" value="${param.deviceId}"/>
                    <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d" id="cai"> 
                        <li status="already" data-role="list-divider">已收藏</li> 
                        <c:forEach items="${requestScope.favoriteList}" var="item">
                            <li id="li${item.menu.id}">
                                <img id="image${item.menu.id}" style="position:absolute; top: 4px; left: 5px;" src="${applicationScope.webApp.root}/images/${item.menu.id}/${item.menu.smallPortrait}" />
                                <h3>${item.menu.title}</h3> 
                                <p><strong>${item.menu.name}</strong></p> 
                                <p>${item.menu.store.address}</p>
                                <div style="position:absolute; top: 2px; right: 10px;">
                                    <div data-role="controlgroup">
                                        <input type="button" menuId="${item.menu.id}" command="cancelFavorite" favoriteId="${item.id}" value="取消收藏" />
                                        <input type="button" menuId="${item.menu.id}" command="startOrder" value="开始点菜" />
                                    </div>
                                </div>
                            </li> 
                        </c:forEach>
                        <li status="notyet" data-role="list-divider">未收藏</li> 
                        <c:forEach items="${requestScope.restList}" var="item">
                            <li menuId="${item.id}">
                                <img style="position:absolute; top: 4px; left: 5px;" src="${applicationScope.webApp.root}/images/${item.id}/${item.smallPortrait}" />
                                <h3>${item.title}</h3> 
                                <p><strong>${item.name}</strong></p> 
                                <p>${item.store.address}</p>
                                <div style="position:absolute; top: 2px; right: 10px;">
                                    <div data-role="controlgroup">
                                        <input type="button" menuId="${item.id}" command="favorite" value="收藏菜单" />
                                        <input type="button" menuId="${item.id}" command="startOrder" value="开始点菜" />
                                    </div>
                                </div>
                            </li> 
                        </c:forEach>
                    </ul> 
                </div><!--/content-primary -->
            </div><!-- /content -->
        </div><!-- /page --> 
        <script>
            
            $("#cai").click(function(e){
                
                var _btn=e.target;
                while(_btn.nodeName!="LI"){
                    if($(_btn).attr("command")=="favorite"){
                        favorite($(_btn));
                        break;
                    } else if($(_btn).attr("command")=="cancelFavorite"){
                        cancelFavorite($(_btn));
                        break;
                    } else if($(_btn).attr("command")=="startOrder"){
                        startOrder($(_btn));
                        break;
                    }
                    _btn=_btn.parentNode;
                }
                e.preventDefault();
            });
        
            function favorite(obj){
                //alert(obj);
                //alert(obj.attr("menuId"));
                //alert($('#deviceId').val());
                window.location.href="${applicationScope.webApp.root}/json?command=favorite&menuId="+obj.attr("menuId")+"&deviceId="+$('#deviceId').val();
                /*
                $.ajax({
                    type: "GET",
                    url: "${applicationScope.webApp.root}/json",
                    data: "command=favorite&menuId="+obj.attr("menuId")+"&deviceId="+$('#deviceId').val(),
                    success: function(msg){
                        //alert("msg="+msg);
                        if(msg.success){
                            $('li[menuId="'+obj.attr("menuId")+'"]').attr("favoriteId", msg.favoriteid);
                            $('li[menuId="'+obj.attr("menuId")+'"]').insertAfter($('li[status="already"]'));
                        }else{
                            alert(msg.message);
                        }
                    }
                });*/
            }
            
            function cancelFavorite(obj){
                window.location.href="${applicationScope.webApp.root}/json?command=cancelFavorite&favoriteId="+obj.attr("favoriteId")+"&deviceId="+$('#deviceId').val();
                /*
                $.ajax({
                    type: "GET",
                    url: "${applicationScope.webApp.root}/json",
                    data: "command=cancelFavorite&menuId="+obj.attr("menuId")+"&deviceId="+$('#deviceId').val(),
                    success: function(msg){
                        //alert("msg="+msg);
                        if(msg.success){
                            $('li[menuId="'+obj.attr("menuId")+'"]').insertAfter($('li[status="already"]'));
                        }else{
                            alert(msg.message);
                        }
                    }
                });
                */
            }
            //callObjC://start?menuId=${item.id}
            function startOrder(obj){
                window.location.href = "callObjC://startOrder?menuId="+obj.attr("menuId");
            }
            
            /*
            $('[command="cancelFavorite"]').click(function() {
                alert('Handler for cancelFavorite .click() called.');
            });
            
            $(document).ready(function() {
                $('[command="favorite"]').click(function(e) {
                    alert('Handler for favorite .click() called.');
                   
                });
            });
             */
        </script>
    </body>
</html>
